<template>
  <div class="check-result-detail">
    <iu-header>
      <template #left>
        <x-icon
          @click="spotCheckView"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>
        检查详情
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <template v-if="standard.id">
      <div class="check-title-card">
        <div class="card-title">
          <div>{{ standard.submitTime | formatDate("YYYY-MM-DD HH:mm") }}</div>
          <div>
            风险点
            {{
              +standard.normalNum +
                +standard.noNormalNum +
                +standard.abnormalNum
            }}/{{ standard.amount }}
            <span style="margin-left:16px">{{ standardStatus }}</span>
          </div>
        </div>
        <div class="card-body">
          <div class="body-item">
            <div class="body-tag">
              <img
                src="@/assets/icon/safety_controlled.svg"
                alt=""
                style="width:15px;height:16px;margin-right:6px"
              />
              <span style="margin-left:6px">
                正常：{{ standard.normalNum }}
              </span>
            </div>
            <div class="body-tag">
              <img
                src="@/assets/icon/safety_warning.svg"
                alt=""
                style="width:15px;height:16px;margin-right:6px"
              />
              <span style="margin-left:6px">
                异常：{{ +standard.abnormalNum + +standard.noNormalNum }}
              </span>
            </div>
            <div></div>
          </div>
          <div class="body-item">
            <div>风险点：{{ standard.name || standard.checkStandardName }}</div>
            <div>执行人：{{ standard.submitUserName }}</div>
            <div></div>
          </div>
        </div>
      </div>
      <div class="cate-nfo">
        <div class="info-list" v-for="item in standard.items" :key="item.id">
          <div class="check-list">
            <div class="check-list-title" @click="eventShow(item)">
              <img
                v-if="item.type == 1"
                src="@/assets/icon/safety_controlled.svg"
                alt=""
                style="width:15px;height:16px;margin-right:6px"
              />
              <img
                v-else-if="item.type == 2 || item.type == 3"
                src="@/assets/icon/safety_warning.svg"
                alt=""
                style="width:15px;height:16px;margin-right:6px"
              />
              <img
                v-else-if="item.type == 0"
                src="@/assets/icon/safety_noting.svg"
                alt=""
                style="width:16px;height:16px;margin-right:6px"
              />
              <span class="list-text">
                {{ item.checkStandardItemName }}
              </span>
              <template v-if="item.trouble">
                <x-icon
                  v-show="show.includes(item.id)"
                  type="ios-arrow-right"
                  fill="#fff"
                  size="14"
                ></x-icon>
                <x-icon
                  v-show="!show.includes(item.id)"
                  type="ios-arrow-down"
                  fill="#fff"
                  size="14"
                ></x-icon>
              </template>
            </div>
            <template v-if="item.trouble && !show.includes(item.id)">
              <div class="check-list-body">
                <div class="body-key">
                  详细说明：
                </div>
                <div class="body-value">
                  {{ item.trouble.remark }}
                </div>
                <div class="body-key">
                  附件：
                </div>
                <div class="body-value">
                  <template v-if="item.trouble.pictures">
                    <x-img
                      v-for="(e, i) in item.trouble.pictures.split(',')"
                      :src="e"
                      :key="i"
                      @click.native="
                        showImage(i, item.trouble.pictures.split(','))
                      "
                    ></x-img>
                  </template>
                </div>

                <div class="detail-btn">
                  <div class="btn" @click="eventDetail(item.trouble)">
                    查看隐患
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="itemRecordDetail.id">
      <div class="check-title-card">
        <div class="card-title">
          <div>
            {{ itemRecordDetail.createTime | formatDate("YYYY-MM-DD HH:mm") }}
          </div>
          <div>
            <span style="margin-left:16px">{{ itemRecordDetailStatus }}</span>
          </div>
        </div>
        <div class="card-body">
          <div class="body-item">
            <div>风险辨识：{{ itemRecordDetail.checkStandardItemName }}</div>
            <div>执行人：{{ itemRecordDetail.userName }}</div>
          </div>
        </div>
      </div>
      <div class="cate-nfo">
        <div class="info-list" style="padding:0">
          <div class="check-list">
            <div class="check-list-body" style="padding:0">
              <div class="body-key">
                详细说明：
              </div>
              <div class="body-value">
                {{ itemRecordDetail.content }}
              </div>
              <div class="body-key">
                附件：
              </div>
              <div class="body-value" v-if="itemRecordDetail.checkImage">
                <x-img
                  v-for="(e, i) in itemRecordDetail.checkImage.split(',')"
                  :src="e"
                  :key="i"
                  @click.native="
                    showImage(i, itemRecordDetail.checkImage.split(','))
                  "
                ></x-img>
              </div>
              <div class="detail-btn" v-if="itemRecordDetail.wxCheckTroubleRes">
                <div
                  class="btn"
                  @click="eventDetail(itemRecordDetail.wxCheckTroubleRes)"
                >
                  查看隐患
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <showImg
      :list="fileList"
      :index="showImgIndex"
      :show.sync="showImg"
    ></showImg>
  </div>
</template>

<script>
import { TransferDom, XImg } from "vux";
import iuHeader from "@/components/common/header/index";
import checklist from "@/components/common/safetymanage/checklist";
import showImg from "@/components/common/showImg/showImg";
import SafetyManageDao from "@/daos/safety_manage_dao";

export default {
  name: "safetyCheckResultDetail",
  directives: {
    TransferDom
  },
  inject: ["backToHomepage"],
  components: {
    iuHeader,
    showImg,
    checklist,
    XImg
  },
  data() {
    return {
      buttonShow: false,
      troubleList: [],
      imgUrl: "",
      statusArr: ["", "待整改", "", "待验收", "", "已逾期", "", "已完成"],
      show: [],
      fileList: [],
      checkStandardList: [],
      showImg: false,
      showImgIndex: 0,
      id: 0,
      status: 0,
      type: 1
    };
  },
  computed: {
    standard() {
      return this.$store.state.safetyCheck.standard;
    },
    standardItem() {
      return this.$store.state.safetyCheck.standardItem;
    },
    itemRecordDetail() {
      return this.$store.state.safetyCheck.itemRecordDetail;
    },
    standardStatus() {
      let text = "通过";
      if (this.standard.noNormalNum) {
        text = "有隐患";
      } else if (this.standard.abnormalNum) {
        text = "不通过";
      }
      return text;
    },
    itemRecordDetailStatus() {
      let text = "通过";
      if (this.itemRecordDetail.type == 3) {
        text = "有隐患";
      } else if (this.itemRecordDetail.type == 2) {
        text = "不通过";
      }
      return text;
    }
  },
  activated() {
    this.id = this.$route.query.id || 0;
    if (this.standard.id) {
      this.getCheckTroubleListByRecordId(this.standard.checkSecurityRecordId);
    } else if (this.itemRecordDetail.id) {
      this.getCheckStandardItemRecordDetails(this.itemRecordDetail.id);
    }
  },
  methods: {
    spotCheckView() {
      this.$router.go(-1);
    },
    getCheckTroubleListByRecordId(recordId) {
      SafetyManageDao.getCheckTroubleListByRecordId(recordId, res => {
        this.troubleList.splice(0);
        if (res) {
          this.troubleList = res;
          let standard = this.standard;
          standard.items.forEach(element => {
            let result = this.troubleList.find(
              e => e.checkStandardItemRecordId == element.id
            );
            this.$set(element, "trouble", result);
          });
          this.$store.commit("setStandard", standard);
        }
      });
    },
    getCheckStandardItemRecordDetails(itemRecordId) {
      SafetyManageDao.getCheckStandardItemRecordDetails(itemRecordId, res => {
        if (res) {
          this.$store.commit("setStandardRecordDetail", res);
        }
      });
    },
    getCheckStandardRiskRankDetails(checkStandardItemId) {
      SafetyManageDao.getCheckStandardRiskRankDetails(
        checkStandardItemId,
        res => {
          if (res) {
            this.detail = res;
          }
        }
      );
    },
    getTroubleListByCheckStandardItemId(checkStandardItemId) {
      SafetyManageDao.getTroubleListByCheckStandardItemId(
        {
          checkStandardItemId,
          pageNum: 1,
          pageSize: 0
        },
        res => {
          this.troubleList.splice(0);
          if (res) {
            this.troubleList = res;
          }
        }
      );
    },
    eventShow({ id }) {
      if (this.show.includes(id)) {
        let index = this.show.findIndex(e => e === id);
        this.show.splice(index, 1);
      } else {
        this.show.push(id);
      }
    },
    eventDetail({ id }) {
      this.$router.push({
        name: "safetyRisksDetail",
        query: {
          id
        }
      });
    },
    showImage(index, list) {
      this.fileList.splice(0);
      this.fileList = list;
      this.showImg = true;
      this.showImgIndex = index;
    }
  }
};
</script>
<style lang="less">
// .info-list {
//   .vux-table.vux-table-bordered::before {
//     background-color: #c7c7c7;
//   }
//   .vux-table::after {
//     background-color: #c7c7c7;
//   }
// }
</style>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transform: translateY(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-140%);
}

.check-result-detail {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  color: #fff;
  background-color: #18182c;
  &.show-more-open {
    overflow: hidden;
  }
  .check-title-card {
    font-size: 16px;
    color: #fff;
    background-color: #22233f;
    margin: 16px 16px 0;
    padding: 8px;
    border-radius: 5px;
    overflow: hidden;
    .card-title {
      font-size: 14px;
      margin: -8px -8px 0;
      padding: 4px 8px;
      display: flex;
      justify-content: space-between;
      background-color: #2e2f4f;
    }
    .card-body {
      .body-item {
        margin: 12px 0;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
      }
      .body-tag {
        font-size: 14px;
        display: flex;
        align-items: center;
      }
    }
  }
  .check-list {
    padding: 8px;
    font-size: 14px;
    .check-list-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list-text {
        width: 100%;
        padding: 0 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .check-list-body {
      // display: flex;
      // align-items: center;
      padding: 8px 0;
      .body-key {
        color: rgba(255, 255, 255, 0.6);
      }
      .body-value {
        padding: 16px 0;
        img {
          max-width: 120px;
          margin-right: 10px;
        }
      }
      .detail-btn {
        width: 100%;
        padding: 6px;
        margin-top: 16px;
        .btn {
          width: 100px;
          margin: 0 auto;
          padding: 6px 0;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          background: #3967dc;
          border-radius: 5px;
        }
      }
    }
  }
}
.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding: 0 16px 8px;
  background-color: #18182c;

  .info-list {
    background: #22233f;
    padding: 8px 0;
    margin: 8px 0;
    // min-height: 260px;
    border-radius: 4px;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      margin: 8px 0;
      padding: 0 8px;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      padding: 0 8px;
      // margin-right: 30px;
      width: 100px;
      text-align: left;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .modify-btn {
      font-size: 14px;
      margin-left: 8px;
      color: gray;
    }
    .warning {
      color: #ff2c2c;
    }
  }
}
</style>
<style lang="less">
.energy-img-dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
